<template>
	<view>
		<view class="w100 comment_box">
			<view class="w100 mb20 goods_list">
				<view class="w100 item">
					<image :src="goods.goods_images" mode=""></image>
					<view class="fr item_msg">
						<view class="title">
							{{ goods.goods_name }}
						</view>
						<view class="props">
							{{ goods.goods_props && goods.goods_props.toString() }}
						</view>
					</view>
				</view>
			</view>

			<view class="w100 mb20 order_box">
				<view class="w100 order p10">
					<view class="fl">
						<text>商品评价</text>
					</view>
				</view>
				<view class="w100 order p10">
					<up-radio-group v-model="score" placement="row">
						<view class="u-radio" v-for="(item, index) in tabs" :key="index">
							<up-radio activeColor="red" size="25" :label="item.label" :name="item.name"
								@change="radioChange">
							</up-radio>
						</view>
					</up-radio-group>
				</view>
			</view>

			<view class="w100 mb20 order_box">
				<view class="order">
					<view class="fl w100 mb20">
						<text>评价内容</text>
					</view>
					<view class="w100">
						<textarea class="remark" v-model="content" placeholder="多个角度评价宝贝，可以帮助更多想买的人哦"></textarea>
					</view>
				</view>
			</view>

			<view class="w100 mb20 order_box">
				<view class="order image-list">
					<view class="img" v-for="(item, index) in imgs" :key="index">
						<image :src="item" :data-index="index" mode="aspectFill" @click="previewImg"></image>
						<view class="delete-btn" :data-index="index" @click="deleteImg">×</view>
					</view>

					<view class="upload-img-btn" @click="chooseImg">
						<text class="iconfont icon-shangchuantupian"></text>
					</view>
				</view>
			</view>
		</view>

		<view class="footer-fixed">
			<view class="btn-wrapper">
				<button class="btn-item" @click="handleSubmit">发布评价</button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';
	import {
		COMMON
	} from "@/utils/commom.js"
	import {
		get_goods_comment,
		post_add_comment
	} from "@/api/comment.js"
	import {
		uploadFile
	} from "@/api/upload.js"


	const option = ref({});
	const goods = ref({});
	const score = ref(10);
	const content = ref('');
	const imgs = ref([]); // 临时图片
	const file = ref([]);

	const tabs = ref([{
			name: 10,
			label: '好评',
		},
		{
			name: 20,
			label: '中评'
		},
		{
			name: 30,
			label: '差评'
		}
	]);

	onLoad((options) => {
		option.value = options
	})

	onShow(() => {
		get_detail(option.value.order_id, option.value.order_goods_id);
	})

	//获取评价商品信息
	function get_detail(order_id, order_goods_id) {
		get_goods_comment({
			order_id,
			order_goods_id
		}).then(res => {
			goods.value = res.data;
		})
	}

	// 选择评价
	function radioChange(e) {
		score.value = e;
	}

	// 上传图片
	async function chooseImg(e) {
	  let temp = imgs.value;
	  wx.chooseImage({
	    sizeType: ['original', 'compressed'],
	    sourceType: ['album', 'camera'],
	    success: async (res) => { 
	      const { tempFilePaths } = res;
	      try {
	        let files = await uploadFile(tempFilePaths); 
	        file.value = files
	        for (const path of tempFilePaths) {
	          if (temp.length >= 9) {
	            break;
	          }
	          temp.push(path);
	        }
	        imgs.value = temp;
	      } catch (error) {
	        console.error('上传失败:', error);
	      }
	    },
	  });
	}
	
	// 移除当前图片
	function deleteImg(e) {
		let img = imgs.value,
			files = file.value,
			index = e.currentTarget.dataset.index;
		img.splice(index, 1);
		files.splice(index, 1);
		imgs.value = img;
		file.value = files;
	}

	// 预览图片
	function previewImg(e) {
		let index = e.currentTarget.dataset.index,
			img = imgs.value;
		wx.previewImage({
			current: img[index],
			urls: img
		})
	}
	
	//发布评价
	function handleSubmit() {
		let data = {
			order_id: option.value.order_id,
			goods_id: goods.value.goods_id,
			order_goods_id: option.value.order_goods_id,
			score: score.value,
			content: content.value,
			file: file.value
		}
		
		post_add_comment(data).then(res => {
			COMMON.re_back(res)
		})
	}
</script>

<style lang="scss" scoped>
	@import '@/static/css/order.scss';

	.comment_box {
		padding: 20rpx;
	}

	.u-radio {
		flex: 1;
	}
</style>